<template>
  <div class="body">
    <div class="tk " v-show="delivertk_show">
      <div class="bg"></div>
      <div class="tk-box">
        <div class="tk-item">
          <div class="left ">{{delivertkTitle}}</div>
          <div class="right">
            <img class="close" src="../../assets/images/dwxc/tk_x.png" @click="tk_x" />
          </div>
        </div>
        <div class="tk_body" v-show="!deliverjsxc_show">
          <div class="tk-item" @click="uactive(item)" v-for="(item, index) in deliverunames" :key="index"
            :class="{'active':unamesid.indexOf(item.userid) != -1}">
            <div class="left">{{item.userName}}</div>
          </div>

          <!-- <div class="tk-item">
            <div class="left"></div>
          </div> -->

        </div>
        <div class="tk_body" v-show="deliverjsxc_show">
          <div class="tishi">
            <div class="">根据巡查要求,本次巡查结束时间应在{{time}}在任意点位上结束巡查</div>
          </div>
        </div>
        <div class="tk-item btns btn_1" v-show="!deliverjsxc_show">
          <button class="btn " type="button" @click="btn">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'addStaff',
    data() {
      return {
        // tkTitle: "提示"
        unamesid: [],
        tk_show: null,
        list: [],
        time:""
      }
    },
    props: ["delivertk_show", "deliverjsxc_show", "delivertkTitle", "deliverunames", "delivernameactive", "delivernameShow","delivertimeinterval"],
    mounted() {
      var _this = this;
      this.on_unamesid()
    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      btn() {//确定确定弹框
        var _this = this;
        this.list = []
        this.tk_show = false
        this.deliverunames.forEach(item => {
          this.unamesid.forEach(i => {
            if (item.userid == i) {
              _this.list.push(item)
            }
          });
        });
        if (_this.list.length > 2) {
          this.$emit("receivenameShow", true);
        }
        this.$emit("receivenameactive", this.list);
        this.$emit("receivetkshow", this.tk_show);
        console.log(this.list)
        console.log(this.unamesid)
      },
      tk_x() {//关闭弹框
        this.tk_show = false
        this.unamesid = []
        this.on_unamesid()
        this.$emit("receivetkshow", this.tk_show);
      },
      uactive(obj) {
        var _this = this
        // console.log(obj)
        console.log(this.unamesid)
        console.log(this.unamesid.indexOf(obj.userid))
        if (this.unamesid.indexOf(obj.userid) != -1) {
          _this.unamesid.splice(this.unamesid.indexOf(obj.userid), 1);
        } else {
          _this.unamesid.push(obj.userid)
        }
        console.log(this.unamesid)

      },
      on_unamesid() {
        var _this = this;
        _this.unamesid=[]
        this.delivernameactive.forEach((item, i) => {
          _this.unamesid.push(item.userid)
        });
        console.log(this.unamesid)
      }

    },
    created() {

    },
    watch: {
      delivernameactive: {
        handler(newValue, oldValue) {
          this.on_unamesid();
        },
        deep:true //深度监听
      },
      delivertimeinterval:function(newValue, oldValue){
      this.time=newValue
    }
    },
   

  }
</script>

<style scoped>
  /* 弹框 */
  .tk {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .tk-hide {
    display: none !important;
  }

  .tk .bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
  }

  .tk .tk-box {
    width: 8.333333rem;
    height: auto;
    background-color: #FFFFFF;
    z-index: 1002;
    border-radius: 0.222222rem;
    /* position: relative;
    padding-bottom: 1.5741rem; */
  }

  .tk .tk-item {
    width: auto;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #DDDDDD solid;
    margin-left: 0.333333rem;
    margin-right: 0.333333rem;
  }

  /* .tk .tk-item:last-child {
			border: none;
		} */

  .tk .tk-item .left {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.3889rem;
    margin-right: 0.1852rem;
  }

  .tk .tk-item .right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .tk .tk-item .right input {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  .tk .tk-item .close {
    width: 0.37037rem;
    height: 0.37037rem;
  }

  .tk .date-piker {
    justify-content: space-between;
  }

  .tk .date-piker button {
    width: 3.777777rem;
    height: 1.055555rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tk .date-piker button img {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  .tk .btns {
    height: 1.5741rem;
    justify-content: center;
    /* position: absolute;
    bottom: 0;
    width: 100%; */
  }

  .tk .btns .btn {
    width: 3.648148rem;
    height: 1.0741rem;
    background-color: #2B6CFE;
    color: #fff;
    border-radius: 0.1111rem;
    font-size: 0.3889rem;
  }

  input::placeholder {
    color: #B1B1B1;
    font-size: 0.3889rem;
  }

  .img_r {
    width: 0.1852rem;
    height: 0.3426rem;
  }

  .tk_body {
    max-height: 6.9444rem;
    overflow-y: auto;
    /* padding-bottom: 10px; */
  }

  .active {
    color: #2877FE;
  }

  .tk .tishi {
    padding: 0.3333rem;
    font-size: 0.3889rem;
    height: auto;
    padding-bottom: 0.5556rem;
  }
</style>